<template>
    <div v-loading="loading" class="Main">
        <div class="w1440">
            <div class="MainLeft">
                <div class="ForumBox bgwhite slideTxt">
                    <el-tabs v-model="activeTab">
                        <el-tab-pane label="消息通知" name="first">
                            <div v-if="currentList.length" class="message-list">
                                <ul>
                                    <li></li>
                                </ul>
                                <!-- 分页 -->
                                <div class="pager d-flex j-center">
                                    <el-pagination v-model:current-page="queryParams.pageNo"
                                        v-model:page-size="queryParams.pageSize" background
                                        layout="prev, pager, next, jumper" :total="queryParams.total" />
                                </div>
                            </div>
                            <el-empty v-else :image-size="200" />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="Message">
import { userApi,postApi,otherApi } from '@/api';
import { computed, ref, reactive, onBeforeMount, watch } from 'vue';
import { useRouter } from 'vue-router';
import { commonMethods } from '@/utils/common';
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/store/Common';
import { ElNotification } from 'element-plus';

// 公共方法和计算属性
const { formatCommentCount } = commonMethods();

// 公共store
const commonStore = useCommonStore();
const { userInfoCommon } = storeToRefs(commonStore);

// 路由
const router = useRouter();

/**
 * @name 数据
 */
const activeTab = ref('first'); // 选中的标签页
const loading = ref(true); // 加载中

/**
 * @name 生命周期
 */
onBeforeMount(() => {
    getMessageList();
})

/**
 * @name 消息列表
 */
const currentList = ref([]);
const queryParams = reactive({
    type: '',
    pageNo: 1,
    pageSize: 10,
    total: 0,
})
const getMessageList = () => {
    loading.value = true;
    otherApi.getMessageList(queryParams).then((res) => {
        currentList.value = res.result.list;
        queryParams.total = Number(res.result.total);
    }).catch(err => { }).finally(() => {
        loading.value = false;
    });
}

/**
 * @name 访问页面需要将消息设置为已读
 */
const setMessageRead = () => {
    otherApi.setMessageRead().then((res) => {
        // 更新pinia中的消息数量
        commonStore.setMessage(0);
    }).catch(err => { })
}

watch(() => queryParams.pageNo, () => {
    getMessageList();
})


</script>

<style lang="less" scoped>
:deep(.el-carousel__container) {
    height: 355px;
}

:deep(.el-tabs__item) {
    font-size: 20px;
    color: #666;
    padding-bottom: 10px;
}

:deep(.el-tabs__item.is-active) {
    color: #333;
}

:deep(.el-tabs__active-bar) {
    background-color: #00753e;
}

.blogger-list {
    min-height: 300px;

    ul {
        li {
            width: 45%;
        }
    }
}
</style>